<script setup lang="ts">
import TemplateEditor, { TemplateEditorProps } from "@/components/template-editor.vue";
import { useSwitchable } from "@/utils/hooks.ts";
import { ref } from "vue";
const props: TemplateEditorProps = {
  img: 'https://lf3-cm.ecombdstatic.com/obj/logistics-davinci/preview/v2/yt_76_130.png',
  paperWidth: 76,
  paperHeight: 130,
  customAreaTop: 85,
  customAreaLeft: 0,
  customAreaWidth: 76,
  customAreaHeight: 45,
  fields: [
    {
      field_name: 'goods_name',
      text: '[商品名称]',
      top: 10,
      left: 28,
      width: 21,
      height: 6,
      font_size: 12,
      font_family: '黑体',
      bold: true,
    },
    {
      text: '自定义文本',
      top: 20,
      left: 28,
      width: 15,
      height: 4,
      font_size: 8,
      font_family: '黑体',
      bold: false,
    }
  ]
}

const { state, on } = useSwitchable()
const v = ref<any>({})
const onSave = (fields: CustomTemplateFieldDetail[], url: string, template: string) => {
  v.value.fields = fields
  v.value.url = url
  v.value.template = template
  on()
}

const readonly = ref(false)

</script>

<template>
  <div class="bg-white">
    <ASwitch v-model:checked="readonly"></ASwitch> 展示模式
  </div>

  <div class="h-full w-[800px]">
    <template-editor v-if="props" v-bind="props" v-bind:readonly="readonly" @save="onSave"></template-editor>
  </div>

  <AModal :footer="null" :title="null" v-model:open="state">
    <div class="h-[500px] overflow-auto">
      <div>template URL: {{ v.url }}</div>
      <pre>{{ JSON.stringify(v.fields, null, 4) }}</pre>
      <pre>{{ v.template }}</pre>
    </div>
  </AModal>
</template>